<template>
  <div :id="echarts" ref="echarts" class="echarts" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: ['data', 'titleName'],
  computed: {
    echarts() {
      return 'echarts' + (Math.random() * 100000).toFixed(0)
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (JSON.stringify(this.data) !== '{}') {
        this.drawEcharts(this.data)
      }
    })
  },
  watch: {
    data(newValue, oldval) {
      this.drawEcharts(newValue)
    },
  },

  methods: {
    // 基于准备好的dom，初始化echarts实例
    drawEcharts(val) {
      const myChart = echarts.init(document.getElementById(this.echarts))
      myChart.clear()

      let dataTime = [
        '00:00',
        '02:00',
        '04:00',
        '06:00',
        '08:00',
        '10:00',
        '12:00',
        '14:00',
        '16:00',
        '18:00',
        '20:00',
        '24:00',
      ]
      let newdata = [
        {
          name: '席位1',
          value: [100, 30, 40, 50, 60, 70, 80, 90, 100, 45, 65, 55],
        },
        {
          name: '席位2',
          value: [48, 70, 75, 12, 85, 80, 70, 65, 55, 50, 45, 40],
        },
        {
          name: '席位3',
          value: [100, 35, 50, 45, 55, 66, 80, 80, 90, 100, 40, 66],
        },
      ]
      var ydata = []

      let serice = []
      let colorList = [
        'rgba(53,115,229,',
        'rgba(253,107,63,',
        'rgba(44,217,197,',
      ]

      // 生成数据
      for (let i = 0; i < newdata.length; i++) {
        ydata.push(newdata[i].name)
        let data = newdata[i].value
        for (let k = 0; k < data.length; k++) {
          serice.push({
            name: newdata[i].name,
            value: [k, i, data[k]], // [x坐标 y坐标 值]
            itemStyle: {
              color: `${colorList[i]}${data[k] / 100})`, //设置rgba透明度根据返回百分比分100阶
              borderColor: '#000',
              borderWidth: 2,
            },
          })
        }
      }
      console.log(serice)
      myChart.setOption({
        tooltip: {
          position: 'top',
        },
        animation: false,
        grid: {
          left: '2%',
          right: '5%',
          bottom: '5%',
          top: '20%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: dataTime,
          splitArea: {
            show: true,
          },
          axisLine: {
            lineStyle: {
              color: '#2F2F2F',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#2F2F2F',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#99A0A8',
            },
          },
        },
        yAxis: {
          name: this.titleName,
          nameTextStyle: {
            color: '#fff',
          },
          type: 'category',
          data: ydata,
          splitArea: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              color: '#99A0A8',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#2F2F2F',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#2F2F2F',
            },
          },
          axisTick: {
            show: false,
          },
        },
        visualMap: [
          {
            show: false,
            min: 0,
            max: 100,
            calculable: false,
          },
        ],
        series: [
          {
            name: '',
            type: 'heatmap',
            data: serice,
            label: {
              show: false,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      })
      window.addEventListener('resize', () => myChart.resize(), false)
    },
  },
}
</script>
<style lang="scss" scoped>
.echarts {
  display: flex;
  flex-grow: 1;
  height: 100%;
  width: 100%;
  justify-content: center;
}
</style>
